<template>
    <p>
        二维码
        <span>
            <img :src="src" alt="二维码">
            <p>总代：{{name}}</p>
        </span>
    </p>
</template>

<script>
export default{
  name: 'qrcode',
  data () {
    return {
      src: '~assets/himqrcode.png',
      name: '老王'
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../scss/_variables.scss';
p{
    position:relative;
    text-align:center;
    cursor:pointer;
    letter-spacing:2px;
    font-size:14px;
    font-weight:bold;
    color:$fc1;
    span{
        width:195px;
        height:195px;
        padding:10px;
        display:none;
        border-radius:10px;
        -moz-border-radius:10px;
        -webkit-border-radius:10px;
        background-color:white;
        position:absolute;
        top:3rem;
        right:-4.5rem;
        z-index:99;
        &:before{
            content:"";
            display:block;
            height:0;
            width:0;
            border-bottom:10px solid white;
            border-left:10px solid transparent;
            border-right:10px solid transparent;
            position:absolute;
            top:-10px;
            right:45%;
        }
        img{
            line-height:normal;
            vertical-align:middle;
        }
        p{
            line-height:normal;
            color:$fc3;
        }
    }
    &:hover{
        span{
            display:block;
        }
    }
}
</style>